<template>
  <div class="table-data">
    <el-form
      :rules="rules"
      ref="ruleForm"
      :model="form"
      size="small"
      class="form-box"
      label-width="80px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="模板名称" prop="mt_name">
            <el-input v-model="form.mt_name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="模板名称" prop=""> </el-form-item>
      <!-- <el-row v-for="(item, index) in mt_data" :key="index"> -->
      <el-row v-for="(item, index) in form.mt_data" :key="index">
        <el-col :span="4">
          <el-form-item>
            <el-input placeholder="留言" v-model="item.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select v-model="item.type" placeholder="文本格式">
              <el-option label="文本" value="text"></el-option>
              <el-option label="身份证" value="idcard"></el-option>
              <el-option label="手机号" value="mobile"></el-option>
              <!-- <el-option label="图片" value="image"></el-option> -->
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input placeholder="内容提醒" v-model="item.placeholder"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-checkbox v-model="item.require">必填</el-checkbox>
            <el-checkbox v-model="item.multi">多行</el-checkbox>
          </el-form-item>
        </el-col>
        <el-col :span="1">
          <el-form-item>
            <div class="el-icon-close" @click="DataDeletion(index)"></div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" class="button" size="small" @click="add()">添加字段</el-button>
      </el-form-item>
      <div class="but">
        <el-button class="button" size="medium" @click="CanceltheOperation()">取消</el-button>
        <el-button type="primary" class="button" size="medium" @click="submitFormAdd('ruleForm')">确定</el-button>
      </div>
    </el-form>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import goodsApi from "@/api/goods";
@Component({})
export default class newEditor extends Vue {
  check:boolean=true
  rules:any = {
    mt_name: [{ required: true, message: "请输入模板名称", trigger: "blur" }]
  }
  form: any = {
    mt_name: "",
    mt_data: [{ name: "", type: "", placeholder: "", require: false, multi: false,date:false }],
    mt_id:0,
  };
  add() {
    let obj = {
      name: "",
      type: "",
      placeholder: "",
      require: false,
      multi: false,
      date:false
    };
    this.form.mt_data.push(obj);
  }
  CanceltheOperation() {
    this.$router.push({
        path:'/templateList'
    })
  }
  // 提交
    submitFormAdd(formName: any) {
      (this.$refs[formName] as any).validate((valid: boolean) => {
        if (valid) {
          if(this.check) {
            let _this = this
            _this.check = false
            goodsApi.messageTemplateSave(this.form)
            .then((res: any) => {
              if(res.data.code){
                _this.$message({
                  message: '操作成功',
                  type: "success"
                });
                _this.$router.push({
                  path:'/templateList'
                })
                _this.$emit("loadData")
              }else{
                _this.$message({
                  message: res.data.msg,
                  type: "error"
                });
                _this.check = true
              }
            });
          }
        }
      });
    }
    DataDeletion(i) {
      this.form.mt_data.splice(i,1);
    }
    created() {
        if(this.$route.query.item) {
            let item = this.$route.query.item
            this.form= item
        }else {
            this.form.mt_id= ''
        }
    }
}
</script>

<style lang="scss" >

.el-form-item__content {
    margin-left: 100px !important;

}
.el-form-item__label {
    width: 100px !important;
}
.but {
    text-align: center;
}
.el-icon-close {
  cursor: pointer;
  font-size: 20px;
}
</style>